<form class="layui-form" action="#" id="luyou-search-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="tel" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select name="state" lay-verify="">
                    <option value="">请选择一个状态</option>
                    <option value="1">有效</option>
                    <option value="0">无效</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit="" lay-filter="luyou-search-form">搜索</button>
        </div>
    </div>
</form>

<table id="luyou-table" lay-filter="luyou-table"></table>
<script>
    layui.use(function(){

        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;
        form.render('select');
        table.render({
            elem: '#luyou-table'
            ,url: '/luyou/all'
            ,page: {
                layout: [ 'count', 'prev', 'page', 'next', 'skip','limit']
                ,limit:5
                ,limits:[5, 10, 15, 20, 50]
            }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', sort: true}
                ,{field: 'gatewayapiname', title: '名称'}
                ,{field: 'insideapiurl', title: 'URL'}
                ,{field: 'serviceid', title: 'serviceId'}
                ,{field: 'description', title: '描述'}
                ,{field: 'state', title: '用户权限',  sort: true,templet:function (a) {
                        return a.state==1 ? '<span class="layui-btn layui-btn-xs">有效</span>':'<span class="layui-btn layui-btn-danger layui-btn-xs">无效</span>';;
                    }}
                ,{field: 'idempotents', title: '幂等性',  sort: true,templet:function (a) {
                        return a.idempotents==1 ? '<span class="layui-btn layui-btn-xs">幂等性</span>':'<span class="layui-btn layui-btn-danger layui-btn-xs">非幂等</span>';;
                    }}
                ,{field: 'needfee', title: '是否收费',  sort: true,templet:function (a) {
                        return a.needfee==1 ? '<span class="layui-btn layui-btn-xs">收费</span>':'<span class="layui-btn layui-btn-danger layui-btn-xs">免费</span>';;
                    }}
                ,{field:'operate', title: '操作',toolbar: '#luyou-edit-bar',width:180}
            ]]
            ,toolbar:'#toolbarDemo'
        });

        //头工具栏事件
        table.on('toolbar(luyou-table)',function (obj) {
            switch (obj.event) {
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'deleteUser':
                    var data = table.checkStatus('luyou-table').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = "";
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            });
                            $.ajax({
                                url: '/luyou/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.statusCode=="1013") {
                                        table.reload('luyou-table', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        });



        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#luyou-add-layer').html():$('#luyou-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消']
                , yes: function (index, layero) {
                    layer.load();
                    console.log($("#luyou-add-form").serialize());
                    $.ajax({
                        url: "/luyou/" + (data == null ? 'add' : 'update'),

                        data: data == null ?$("#luyou-add-form").serialize():$("#luyou-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.statusCode==1011||result.statusCode==1015) {
                                table.reload('luyou-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    form.render();

                    if (data != null) {
                        form.val("luyou-edit-form", data);
                    }
                }
            });
        }


        table.on('tool(luyou-table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }

            }
        });
        form.on('submit(luyou-search-form)',function (data) {
            // console.log(data);
            //console.log(data.field);
            table.reload('luyou-table', {
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });


    });
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</button>
    </div>
</script>


<!-- 增加-->
<script type="text/html" id="luyou-add-layer">
    <form id="luyou-add-form" style="width: 80%" class="layui-form" lay-filter="luyou-add-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="gatewayapiname" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">URl</label>
            <div class="layui-input-block">
                <input type="text" name="insideapiurl" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">serviceId</label>
            <div class="layui-input-block">
                <input type="text" name="serviceid" required lay-verify="required" placeholder="请输入公司名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
               <textarea name="description" class="layui-textarea" cols="50" rows="10"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="有效" checked="">
                <input type="radio" name="state" value="0" title="无效">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">幂等性</label>
            <div class="layui-input-block">
                <input type="radio" name="idempotents" value="1" title="幂等性" checked="">
                <input type="radio" name="idempotents" value="0" title="非幂等">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否收费</label>
            <div class="layui-input-block">
                <input type="radio" name="needfee" value="1" title="收费" checked="">
                <input type="radio" name="needfee" value="0" title="免费">
            </div>
        </div>
    </form>
</script>

<!-- 修改-->
<script type="text/html" id="luyou-edit-layer">
    <form id="luyou-edit-form" style="width: 80%" class="layui-form" lay-filter="luyou-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="gatewayapiname" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">URl</label>
            <div class="layui-input-block">
                <input type="text" name="insideapiurl" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">serviceId</label>
            <div class="layui-input-block">
                <input type="text" name="serviceid" required lay-verify="required" placeholder="请输入公司名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" cols="50" rows="10"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="state" value="1" title="有效" checked="">
                <input type="radio" name="state" value="0" title="无效">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">幂等性</label>
            <div class="layui-input-block">
                <input type="radio" name="idempotents" value="1" title="幂等性" checked="">
                <input type="radio" name="idempotents" value="0" title="非幂等">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否收费</label>
            <div class="layui-input-block">
                <input type="radio" name="needfee" value="1" title="收费" checked="">
                <input type="radio" name="needfee" value="0" title="免费">
            </div>
        </div>
    </form>
</script>

<script type="text/html" id="luyou-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>